"use client"

import React, { useEffect } from "react";
import * as echarts from 'echarts';


interface CurveGraphProps {
  graphType: string,
  data: any,
  labelShow?: boolean,
  xAxis?: string[] | number[],
  yAxis?: number[],
  container: string,
  title?: string,
  date: any
}


const CurveGraph: React.FC<CurveGraphProps> = ({
  container,
  title,
  data,
  date
}: CurveGraphProps) => {
  useEffect(() => {
    let myChart = echarts.init(document.getElementById(container));
    
    myChart.setOption({
      xAxis: {
        data: date
      },
      yAxis: {},
      series: [
        {
          data: data,
          type: 'line',
          smooth: true
        }
      ],
      grid: {
        width: "600px",
        height: "680px",
        containLabel: true
    },
    })
    if (typeof window !== 'undefined') {
      window.addEventListener("resize", function (e) {
        myChart.resize();
      })
    } else {
      console.log('u are on the server~');

    }
  })

  
  return (
    <div id={container} style={{ width: '800px', height: '800px' }} ></div>
  )
}

export default CurveGraph;